<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="./lib/vue-2.4.0.js"></script>
    <script src="./lib/vue-resource-1.3.4.js"></script>
    <link rel="stylesheet" type="text/css" href="css/guanli-login.css">
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <title>管理员登录</title>
</head>

<body>
    <div id="app">
        <div class="logo-box">
            <div class="login">
                <div class="bxs-row0" style="text-align:center;">
                    <p class="tips">Amazon Preferential Platform </p>
                    <p class="tips">Administrator Logon</p>
                </div>
                <form>
                    <!-- 选择管理员 -->
                    <input type="text" class="administrators" list="adminlist" id="choose"
                        placeholder="Please select Administrator">
                    <datalist id="adminlist">
                        <select id="adminlist2">
                            <option>General Administrator</option>
                            <option>Super Administrator</option>
                        </select>
                    </datalist>
                    <!-- 输入邮箱名 -->
                    <div class="bxs-row">
                        <input type="text" class="username" placeholder="Please enter your mailbox number"
                            v-model="adminEmail">
                        <p class=" err err-username"></p>
                    </div>
                    <!-- 输入密码 -->
                    <div class="bxs-row">
                        <input type="password" class="password" placeholder="Please input a password"
                            v-model="adminPassword">
                    </div>
                    <!-- 图片验证码 -->
                    <div class="container-fluid">
                        <div class="form-row">
                            <div class="col-12">
                                <div class="container">
                                    <div id="captcha"></div>
                                    <div id="msg"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 登录按钮 -->
                    <div class="bxs-row1">
                        <!-- <a href="User-Information.html" style="background-color: antiquewhite">
                            <input type="submit" class="submit btn" value="sign in" @click.prevent="login()"
                                style="width:80%;background-color: #0070ba;border:1px solid #0070ba;text-align: center;color: #fff;border-radius: 25px;">
                        </a> -->

                        <button v-on:click="login" class="submit btn"
                            style="width:80%;background-color: #0070ba;border:1px solid #0070ba;text-align: center;color: #fff;border-radius: 25px;">
                            <a href="User-Information.html" style="color: #fff;list-style: none;">sign in</a></button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
    <script src="js/longbow.slidercaptcha.js"></script>
    <script>
        Vue.http.options.emulateJSON = true;
        var vm = new Vue({
            el: '#app',
            data() {
                return {
                    adminEmail: "",
                    adminPassword: "",
                    text: "",
                    data2: {}
                }
            },
            mounted: function () {
                $('#captcha').sliderCaptcha({
                    repeatIcon: 'fa fa-redo',
                    setSrc: function () {
                        return 'http://images.sdgxgz.com/Pic' + Math.round(Math.random() *
                            136) + '.jpg';
                    },
                    onSuccess: function () {
                        alert('验证通过!');
                    }
                });
            },
            methods: {
                login() {
                    var obj = document.getElementById("adminlist2");
                    var x = obj.options.length;
                    let data = {
                        userName: this.adminEmail,
                        password: this.adminPassword,
                    };
                    console.log(data)
                    this.data2 = data;
                    console.log(this.data2)
                    for (i = 0; i < x; i++) {
                        if (obj.options[i].selected == true) {
                            var text = obj.options[i].value;
                            this.text = text;
                        }
                    }
                    console.log(this.text)
                    if (this.text == "General Administrator") {
                        this.$http.get(
                            "http://106.13.96.243:8080/Neuq_JavaWeb_war_exploded/GeneralAdministractorController/handleLoginRequest", {
                                params: {
                                    userName: this.data2.userName,
                                    password: this.data2.password
                                }
                            }).then(res => {
                            console.log(res)
                            if (res.data.statu == 10000) {
                                // this.tishi = "login successfully";
                                alert("login success");
                            }
                        })
                    } else {
                        alert("please choose General Administrator")

                        function fun1() {
                            return false;
                        }
                    }

                }
            }

        })
    </script>


</body>

</html>